<template>
  <div>
    <Row :gutter="20">
      <Col :span="18">
        <div class="img-container">
          <img :id="imgId">
        </div>
      </Col>
      <Col :span="6">
        <Row :gutter="20">
          <Col :span="24">
            <div class="img-preview preview-lg"></div>
          </Col>
        </Row>
        <Row :gutter="20" style="margin-top: 20px;">
          <Col :span="13">
            <div class="img-preview preview-md"></div>
          </Col>
          <Col :span="7">
            <div class="img-preview preview-sm"></div>
          </Col>
          <Col :span="4">
            <div class="img-preview preview-xs"></div>
          </Col>
        </Row>

        <div class="docs-data">
          <Input v-model="cropData.x">
            <span slot="prepend">X</span>
            <span slot="append">px</span>
          </Input>
          <Input v-model="cropData.y">
            <span slot="prepend">Y</span>
            <span slot="append">px</span>
          </Input>
          <Input v-model="cropData.width">
            <span slot="prepend">Width</span>
            <span slot="append">px</span>
          </Input>
          <Input v-model="cropData.height">
            <span slot="prepend">Height</span>
            <span slot="append">px</span>
          </Input>
          <Input v-model="cropData.rotate">
            <span slot="prepend">Rotate</span>
            <span slot="append">deg</span>
          </Input>
          <Input v-model="cropData.scaleX">
            <span slot="prepend">ScaleX</span>
          </Input>
          <Input v-model="cropData.scaleY">
            <span slot="prepend">ScaleY</span>
          </Input>
        </div>
      </Col>
    </Row>

    <Row :gutter="20">
      <Col :span="18">
        <ButtonGroup>
          <Button type="primary" icon="md-move" @click="dragMode('move')"></Button>
          <Button type="primary" icon="md-crop" @click="dragMode('crop')"></Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button type="primary" icon="md-add" @click="zoom(0.1)"></Button>
          <Button type="primary" icon="md-remove" @click="zoom(-0.1)"></Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button type="primary" icon="md-arrow-back" @click="move( -moveStep, 0)"></Button>
          <Button type="primary" icon="md-arrow-forward" @click="move(moveStep, 0)"></Button>
          <Button type="primary" icon="md-arrow-up" @click="move(0, -moveStep)"></Button>
          <Button type="primary" icon="md-arrow-down" @click="move(0, moveStep)"></Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button type="primary" icon="md-undo" @click="rotate(-rotateStep)"></Button>
          <Button type="primary" icon="md-redo" @click="rotate(rotateStep)"></Button>
        </ButtonGroup>

        <ButtonGroup>
          <Button type="primary" icon="md-swap" @click="scale('X')"></Button>
          <Button type="primary" icon="md-swap" class="rotateZ-90" @click="scale('Y')"></Button>
        </ButtonGroup>

        <ButtonGroup>
          <Button type="primary" icon="md-checkmark" @click="cropper.crop()"></Button>
          <Button type="primary" icon="md-close" @click="cropper.clear()"></Button>
        </ButtonGroup>

        <ButtonGroup>
          <Button type="primary" icon="md-lock" @click="cropper.disable()"></Button>
          <Button type="primary" icon="md-unlock" @click="cropper.enable()"></Button>
        </ButtonGroup>

        <ButtonGroup>
          <Button type="primary" icon="md-sync" @click="cropper.reset()"></Button>
          <Upload class="update-button" action="" :show-upload-list="false" :before-upload="beforeUpload">
            <Button type="primary" icon="md-cloud-upload"></Button>
          </Upload>
          <Button type="primary" icon="md-power" @click="cropper.destroy()"></Button>
        </ButtonGroup>
      </Col>

      <Col :span="6">
        <RadioGroup v-model="cropRatio" type="button" size="large" @on-change="handleCropRatio">
          <Radio label="16/9">16:9</Radio>
          <Radio label="4/3">4:3</Radio>
          <Radio label="1/1">1:1</Radio>
          <Radio label="2/3">2:3</Radio>
          <Radio label="NaN">Free</Radio>
        </RadioGroup>
      </Col>
    </Row>

    <Row :gutter="20">
      <Col :span="18">
        <ButtonGroup>
          <Button type="success" @click="openImageView">Get Cropped Canvas</Button>
          <Button type="success" @click="openImageView(320, 180)">320×180</Button>
          <Button type="success" @click="openImageView(160, 90)">160×90</Button>
        </ButtonGroup>
      </Col>
    </Row>

    <ImageView ref="imageViewModal"></ImageView>
  </div>
</template>

<script>
import Cropper from 'cropperjs';

import './index.less';
import 'cropperjs/dist/cropper.min.css';

import ImageView from './imageView.vue';

export default {
  name: 'index',
  components: {
    ImageView
  },
  props: {
    moveStep: {
      type: Number,
      default: 4
    },
    rotateStep: {
      type: Number,
      default: 45
    }
  },
  data() {
    return {
      cropper: null,
      insideSrc: '',
      cropData: {
        x: '',
        y: '',
        width: '',
        height: '',
        rotate: '',
        scaleX: '',
        scaleY: '',
      },
      cropRatio: '16/9',
    };
  },
  computed: {
    imgId() {
      return `cropper${this._uid}`;
    }
  },
  watch: {
    insideSrc(src) {
      this.replace(src);
    }
  },
  methods: {
    beforeUpload(file) {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (event) => {
        this.insideSrc = event.target.result;
      };
      return false;
    },
    replace(src) {
      this.cropper.replace(src);
      this.insideSrc = src;
    },
    dragMode(type) {
      this.cropper.setDragMode(type);
    },
    zoom(size) {
      this.cropper.zoom(size);
    },
    move(...argu) {
      this.cropper.move(...argu);
    },
    rotate(rotateStep) {
      this.cropper.rotate(rotateStep);
    },
    scale(axis) {
      this.cropper[`scale${axis}`](-this.cropper.getData()[`scale${axis}`]);
    },
    handleCropRatio(value) {
      this.cropper.setAspectRatio(eval(value));
    },
    openImageView(width, height) {
      if (this.cropper.getCroppedCanvas()) {
        const options = {};
        if (width) {
          options.width = width;
        }
        if (height) {
          options.height = height;
        }
        const dataUrl = this.cropper.getCroppedCanvas(options).toDataURL('image/jpeg');
        this.$refs.imageViewModal.open(dataUrl);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      let dom = document.getElementById(this.imgId);
      this.cropper = new Cropper(dom, {
        preview: '.img-preview',
        aspectRatio: eval(this.cropRatio),
        crop: (e) => {
          const data = e.detail;
          this.cropData.x = Math.round(data.x);
          this.cropData.y = Math.round(data.y);
          this.cropData.width = Math.round(data.width);
          this.cropData.height = Math.round(data.height);
          this.cropData.rotate = data.rotate || 0;
          this.cropData.scaleX = data.scaleX || 1;
          this.cropData.scaleY = data.scaleY || 1;
        },
      });
    });
  }
};
</script>

<style scoped lang="less">

</style>
